<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <div id="box">1</div>
    <div id="box">2</div>
    <div id="box">3</div>
    <div class="cont">4</div>
    <div class="cont">5</div>
    <div class="cont">6</div>
    <div class="msg">
        <span>span1</span>
        <span>span2</span>
        <div class="xbox">
            <p>段落1</p>
            <p>段落2</p>
            <p>段落3</p>
            <p>段落4</p>
            <p>段落5</p>
            <p>段落6</p>
            <div class="child">
                <p>段落7-1</p>
                <p>段落7-2</p>
            </div>
        </div>
        <p>段落8</p>
        <p>段落9</p>
    </div>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <input type="text" name="username">
    <input type="text" name="username">
    <input type="text" name="password">
</body>
<script>

    // id选择器：失明特性，只能选择一个，哪怕有多个元素符合要求
    // var box = document.getElementById("box");
    // console.log(box);
    // box.style.background = "red";

    // class选择器：就算没有符合要求的元素，也是以数组的形式呈现，一定要解析后再进行元素操作
    // var cont = document.getElementsByClassName("cont")[0];
    // console.log(cont);
    // console.log(cont[0]);
    // console.log(cont[1]);
    // console.log(cont[2]);
    // cont.style.background = "red";
    // cont[0].style.background = "red";
    // cont[2].style.background = "red";

    // tagName选择器：参考className选择器的规则
    // var span = document.getElementsByTagName("span");
    // console.log(span);

    // name选择器：参数className选择器的规则，注意哪些标签有name属性
    // var un = document.getElementsByName("username")
    // console.log(un);


    // ES5新增的选择器：可以支持大部分的css选择器语法
    // query：只能选择一个，哪怕有多个元素符合要求
    // var ele = document.querySelector("#box");
    // var ele = document.querySelector(".cont");
    // var ele = document.querySelector("span");
    // var ele = document.querySelector("input[name=username]");
    // var ele = document.querySelector(".msg p");
    // var ele = document.querySelector(".msg>p");
    // var ele = document.querySelector("#msg");
    // console.log(ele)

    // queryAll：就算没有符合要求的元素，也是以数组的形式呈现，一定要解析后再进行元素操作
    // var eles = document.querySelectorAll("#box");
    // var eles = document.querySelectorAll(".cont");
    // var eles = document.querySelectorAll("span");
    // var eles = document.querySelectorAll("input[name=username]");
    // var eles = document.querySelectorAll(".msg p");
    // var eles = document.querySelectorAll(".msg>p");
    // var eles = document.querySelectorAll(".cont, span");
    // var eles = document.querySelectorAll("*");
    // console.log(eles);


    // 直接选择
    // ==============
    // 间接选择(关系选择)

    // var xbox = document.querySelector(".xbox");

    // // 根据子，选择父
    // console.log( xbox.parentNode );
    
    // // 根据父，选择子
    // console.log( xbox.children );
    // console.log( xbox.firstElementChild );
    // console.log( xbox.lastElementChild );
    // console.log( xbox.children[3] );

    // // 根据当前选兄弟
    // console.log( xbox.previousElementSibling );
    // console.log( xbox.nextElementSibling );


    // ============
    // 特殊选择器

    // 根节点
    console.log(document);

    // html标签
    console.log(document.documentElement);

    // body标签
    console.log(document.body);

    // head标签
    console.log(document.head);


    // 直接操作title标签内容，不算是选择器
    document.title = "正在演示DOM的各种选择器"
    console.log(document.title);


    
</script>
</html>